<template>
  <el-dialog
      title=""
      :visible.sync="visible"
      width="60%"
      center
      :close-on-click-modal="false"
  >
    <div class="FormsDiv">
      <el-form :model="UsersFrom" label-width="120px" class="demo-ruleForm">
        <div class="form-row">
          <el-form-item label="用户名称" prop="user_name">
            <el-input v-model="UsersFrom.user_name" placeholder="请输入用户名称" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="用户登录账号" prop="user_login">
            <el-input v-model="UsersFrom.user_login" placeholder="请输入用户登录账号" :disabled="true"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="角色列表" >
          <div class="checkbox-group">
<!--            <el-checkbox-group v-model="checkList">-->
<!--              <el-checkbox label="角色1">角色1</el-checkbox>-->
<!--              <el-checkbox label="角色2">角色2</el-checkbox>-->
<!--              <el-checkbox label="角色3">角色3</el-checkbox>-->
<!--            </el-checkbox-group>-->
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="role in tableCheckbox" :key="role.role_id" :label="role.role_id">{{ role.role_name }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>

import {getUserMenu,userMenu} from "@/api/api";
export default {
  name: "UserMenu",
  props:{
    //弹出窗口
    visibleChild: {
      type:Boolean,
      default:false
    },
    childFrom:{
      type:Object,
      default(){
        return {
          user_id : -1,
          user_name: '',
          user_login: '',
        };
      }
    },
    tableCheckbox:{
      type:Array,
      default(){
        return [];
      }
    },
  },
  data(){
    return {
      UsersFrom:JSON.parse(JSON.stringify(this.childFrom)),
      ruleUsers:{},
      checkList: []
    }
  },
  watch:{
    // 这样才能算得上动态监控,不然初始渲染的就会一直保留
    childFrom:{
      // 监听数据发生变化的处理函数
      handler(newValue) {
        this.UsersFrom = JSON.parse(JSON.stringify(newValue));//将监听到修改的值赋予到dataAttrs中
        // console.log('this',this.UsersFrom);
        getUserMenu({user_id:this.UsersFrom.user_id}).then((res) =>{
          if (res.code === 200){
            // console.log('res',res);
            this.checkList =  res.data.map(item => item.role_id);
            // console.log(this.menu_id);
          }else {
            this.visible = false;
          }
        }).catch(error =>{
          this.visible = false;
          this.$message.error(error.message || 'Error');
        })
      },
      // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
      deep: true
    },
  },
  computed:{
    visible:{
      get(){
        return this.visibleChild;
      },
      set(newValue){
        this.$emit("update:visibleChild",newValue);
      }
    }
  },
  methods: {
    submitForm(){
      this.UsersFrom.role_id = this.checkList || 0 ;
      userMenu(this.UsersFrom).then((res) =>{
        if (res.code === 200){
          this.$message.success('保存成功');
          this.$parent.users(null,1,10);
        }
      }).catch(error =>{
        this.$message.error(error.message || 'Error');
      })
      //关闭弹窗
      this.visible = false;
    },
  },
  mounted() {
    // console.log("tableCheckbox",this.tableCheckbox);
  }
}
</script>

<style scoped>
.form-row {
  display: flex;
  flex-wrap: wrap;
}
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  align-items: center;
  //margin-top: 10px;
}
.el-form-item label {
  //margin-top: 10px;
}
</style>